<template>
  <div class="qrCodeBox" @click="qrcodeClick">
    <div class="content">
      <div class="userBox flex">
        <router-link to class="userLogo">
          <img src="../assets/images/0000000000_01.jpg" alt class="userImg" />
        </router-link>
        <div class="userMiddle">
          <div class="phone">185******12</div>
          <div class="upPower">
            当前云钻：
            <b>22</b>
          </div>
        </div>
      </div>
      <div id="qrcode" ref="qrcode" class="qrcode"></div>
      <p>门店结账时出示，自动享受会员价并获得积分</p>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {}
  },
  mounted() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#111')
    this.qrcode()
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度
        text: '56663159' // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      })
    },
    qrcodeClick() {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.qrCodeBox {
  .content {
    width: 700px;
    height: 900px;
    margin: 0 auto;
    background: url(../assets/images/code-bg.png) no-repeat;
    background-size: cover;
    margin-top: 200px;
    position: relative;
    .userBox {
      padding: 50px 30px;
      .userLogo {
        width: 100px;
        height: 100px;
        display: block;
        .userImg {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userMiddle {
        margin-left: 20px;
        height: 120px;
        .phone {
          font-weight: bold;
          font-size: 28px;
          margin: 10px 0;
        }
        .upPower {
          font-size: 30px;
        }
      }
    }
    .qrcode {
      width: 400px;
      text-align: center;
      margin: 40px auto;
    }
    p {
      width: 400px;
      margin: 30px auto;
      overflow: hidden;
      color: #666;
      font-size: 28px;
      text-align: center;
    }
  }
}
</style>